<template>
  <div class="page-container">
    <Head></Head>
    <div class="video">
      <div class="title-wrapper">
        <div class="title">{{$t('预警视频')}}</div>
        <el-date-picker
                style="width: 150px"
                v-model="videoDate"
                type="date"
                :placeholder="$t('选择日期')"
                @change="handleDateChange"
        />
      </div>
      <div class="list">
        <div class="item-big" v-if="list.length >= 1">
          <video muted='muted' :src="list[0].videoUrl" controls="controls" :poster="list[0].videoCover"></video>
        </div>
        <div class="item-big" v-if="list.length >= 2">
          <video muted='muted' :src="list[1].videoUrl" controls="controls" :poster="list[1].videoCover"></video>
        </div>
        <div class="row" v-if="list.length > 2">
          <div class="item-small" v-for="item in list.filter((o, i) => i > 1)" :key="item.id">
            <video muted='muted' :src="item.videoUrl" controls="controls" :poster="item.videoCover"></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import dayjs from 'dayjs';
  import Head from './head'
  import {getVideoPage} from "@/api";
  export default {
    name: "index",
    components: {
      Head
    },
    data() {
      return {
        videoDate: new Date(),
        list: [],
        total: null,
        currentPage: 1,
        pageSize: 20,
        size: 'default',
        disabled: false,
        background: true,
        isLoading: false,
        isDialogVisible: false,
        videoUrl: '',
      }
    },
    methods: {
      async fetchData() {
        const params = {
          page: this.currentPage,
          count: this.pageSize,
          videoDate: dayjs(this.videoDate).format('YYYY-MM-DD')
        };

        try {
          const { data } = await getVideoPage(params);
          if (data.code === 0 && data.data) {
            this.list = data.data.records;
            this.total = +data.data.total; // 更新总数据条数
            this.pageSize = +data.data.size; // 设置每页条数
          }
        } catch (error) {
          console.error('Error fetching videos:', error);
        }
      },
      handleDateChange() {
        this.currentPage = 1; // 重置页码为第一页
        this.fetchData(); // 重新请求数据
      },
      handleSizeChange(size) {
        this.pageSize = size;
        this.fetchData(); // 每页条数变化时重新请求数据
      },
      handleCurrentChange(page) {
        this.currentPage = page;
        this.fetchData(); // 翻页时重新请求数据
      },
    },
    mounted() {
      this.fetchData();
    }
  }
</script>

<style scoped lang="scss">
  .page-container{
    width: 100%;
    padding: 0 16px;
    height: 100%;
    padding-bottom: 80px;
    box-sizing: border-box;
    .video{
      width: 100%;
      padding-top: 12px;
      padding-bottom: 80px;
      .title-wrapper{
        width: 100%;
        display: flex;
        margin-bottom: 12px;
        justify-content: space-between;
        align-content: center;
      }
      .title{
        line-height: 32px;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;

      }
      .list{
        width: 100%;
        .item-big{
          width: 100%;
          aspect-ratio: 343 / 130;
          background: #425540;
          border-radius: 16px 16px 16px 16px;
          margin-bottom: 12px;
          overflow: hidden;
          box-shadow: 0 8px 16px 0 rgba(65, 85, 64, 0.3);
          video{
            object-position: center;

            object-fit: cover;
            width: 100%;
            height: 100%;
          }
        }
        .row{
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }
        .item-small{
          margin-bottom: 12px;
          float: left;
          width: calc((100% - 12px) / 2);
          aspect-ratio: 165 / 108;
          background: #415540;
          border-radius: 16px 16px 16px 16px;
          overflow: hidden;
          box-shadow: 0 8px 16px 0 rgba(65, 85, 64, 0.3);
          video{

            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 100%;
          }
        }
      }

    }

  }
</style>
